<template>
  <zz-Dialog
    v-model="visible"
    title="表单"
    size="medium"
    :showCancelButton="false"
    :showConfirmButton="false"
    @cancel="handleClose"
  >
    <el-form
      ref="formRef"
      :model="formData"
      :label-width="'100px'"
      :label-position="'right'"
      :size="'default'"
      :rules="rules"
    >
      <el-form-item label="输入框" prop="field_1755298401761">
        <el-input
          v-model="formData.field_1755298401761"
          placeholder="请输入输入框"
          clearable
        />
      </el-form-item>
      <el-form-item label="选择器" prop="field_1755298403232">
        <el-select
          v-model="formData.field_1755298403232"
          placeholder="请输入选择器"
          clearable
        >
          <el-option label="选项1" value="1" />
          <el-option label="选项2" value="2" />
        </el-select>
      </el-form-item>
      <el-form-item label="计数器" prop="field_1755298404660">
        <el-input-number
          v-model="formData.field_1755298404660"
          placeholder="请输入计数器"
          :min="0"
          :max="100"
          :step="1"
        />
      </el-form-item>
    </el-form>
    <template #footer-right>
      <el-button @click="handleClose">取消</el-button>
      <el-button type="primary" @click="handleSubmit">确定</el-button>
    </template>
  </zz-Dialog>
</template>

<script setup>
import { ref, reactive } from "vue";
import { ElMessage } from "element-plus";

const formRef = ref();

// 控制显示隐藏
const visible = ref(true);

// 关闭弹窗
const handleClose = () => {
  visible.value = false;
};

// 打开弹窗
const open = () => {
  visible.value = true;
};

// 暴露方法供父组件调用
defineExpose({
  open,
});

const formData = ref({
  field_1755298401761: "",
  field_1755298403232: "",
  field_1755298404660: 0,
});

const rules = {};

const handleSubmit = async () => {
  try {
    await formRef.value.validate();
    console.log("表单数据:", formData.value);
    ElMessage.success("提交成功！");
    handleClose();
  } catch (error) {
    ElMessage.error("请检查表单数据");
  }
};
</script>
